<template>
  <div class="total-class">
    <div>
      <span class="demonstration">CCNU Online Judge </span>
    </div>
    <el-table
      :data="submitCodes"
      border
      style="width: 80%;margin-left: 15%;margin-top: 3vh">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="题目"
        width="250">
        <template slot-scope="scope">
          <div @click="detailData(scope.row)" style="color: #5E1C7A">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="语言"
        width="180">
      </el-table-column>
      <el-table-column
        prop="final_status"
        label="状态"
        width="180">
        <template slot-scope="scope">
          <span :style="{ 'background-color': stateConputed(scope.row.final_status).color }">{{ stateConputed(scope.row.final_status).name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="auto">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Api from '../common/api';
  export default {
    name: "submit-page",
    data() {
      return {
        stateList: [
          {
            state: 0,
            name: '编译中',
            color: '#409EFF'
          },
          {
            state: 11,
            name: '编译失败',
            color: '#F56C6C'
          },
          {
            state: 5,
            name: '格式不对',
            color: '#F56C6C'
          },
          {
            state: 6,
            name: '答案错误',
            color: '#F56C6C'
          },
          {
            state: 7,
            name: '运行超时',
            color: '#F56C6C'
          },
          {
            state: 8,
            name: '内存超限',
            color: '#F56C6C'
          },
          {
            state: 9,
            name: '输出超过限制',
            color: '#F56C6C'
          },
          {
            state: 10,
            name: '运行时错误',
            color: '#F56C6C'
          },
          {
            state: 4,
            name: '运行通过',
            color: '#409EFF'
          }
        ],
        submitCodes:[],
        userInfo:'',
      }
    },
    created(){
      let user = Api.getStorageItem('user');
      if (!user) {
        this.$router.push('/login');
      } else if (user === '过期') {
        localStorage.removeItem('user');
        this.$message.error('您的登录已经过期，请重新登录');
        this.$router.push('/login');
      } else {
        this.userInfo = user;
      }
      Api.apiCall('GET','/get_codes?user_id='+user.id).then(resolve=>{
        if (resolve.data.code === 200){
          this.submitCodes = resolve.data.data;
          console.log(this.submitCodes,"所有代码")
        }else{
          this.$message.error('查询提交记录失败');
        }
      });
    },
    methods:{
      detailData(row){
        this.$router.push("/index/doQuestionPage?question_id="+row.question_id+"&id="+row.id)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    computed:{
      stateConputed(val) {
        return function(val) {
          let returnData = this.stateList.filter(item => {
            return item.state === val;
          });
          return returnData[0];
        };
      }
    }
  }
</script>

<style scoped>
  .block{
    margin-top: 3vh;
  }
  .total-class{
    margin-top: 5vh;
    font-size: 3vw;
  }
</style>
